<template>
  <van-tabs sticky v-model="active" class="tab__tabs" line-height="0">
    <!-- 左侧 -->
    <template v-slot:nav-left>
      <div class="tab__tabs__nav left_btn">
        <van-image
          class="tab__tabs__nav__img"
          src="http://fast-learn-oss.youbaobao.xyz/tb/hongbao.png"
        ></van-image>
        <div class="tab__tabs__nav__text">签到</div>
      </div>
    </template>
    <!-- 默认 -->
    <template>
      <van-tab title="订阅" title-class="tab__tabs__left" name="register">
        <template v-slot:title>
          <div
            :class="[
              'tab__tabs__text',
              { tab__tabs__text__active: active === 'register' },
            ]"
          >
            订阅
          </div>
        </template>
      </van-tab>

      <van-tab title="推荐" name="recommend" title-class="tab__tabs__right">
        <template v-slot:title>
          <div
            :class="[
              'tab__tabs__text',
              { tab__tabs__text__active: active === 'recommend' },
            ]"
          >
            推荐
          </div>
        </template>
      </van-tab>

    </template>
    <!-- 右侧 -->
    <template v-slot:nav-right>
      <div class="tab__tabs__nav right_btn">
        <van-image
          class="tab__tabs__nav__img"
          src="http://fast-learn-oss.youbaobao.xyz/tb/qrcode.png"
        ></van-image>
        <div class="tab__tabs__nav__text">会员码</div>
      </div>
    </template>
        <!-- 搜索框 -->
      <template>
        <search-bar />
        <div class="tab__tabs__right__container" :style="{height:containerH+'px'}">
          <slot></slot>
        </div>
      </template>
  </van-tabs>
</template>

<script>
import SearchBar from './SearchBar.vue'
export default {
  data () {
    return {
      active: 'recommend',
      containerH: 0
    }
  },
  components: {
    SearchBar
  },
  mounted () {
    this.$nextTick(() => {
      // 获取元素
      const layout = document.querySelector('.layout')
      const tab = document.querySelector('.tab__tabs')
      const tabWrapper = document.querySelector('.van-tabs__wrap')
      const SearchBar = document.querySelector('.search-bar')
      const bottomBar = document.querySelector('.bottom-bar')

      // 获取元素高度
      const layoutH = layout.getBoundingClientRect().height
      const tabStyle = window.getComputedStyle(tab)
      const tabPaddingTop = +tabStyle.paddingTop.replace('px', '') // 获取上内边距
      const tabH = tabWrapper.getBoundingClientRect().height

      const SearchBarH = SearchBar.getBoundingClientRect().height
      const searchBarStyle = window.getComputedStyle(SearchBar)
      const searchMarginTop = +searchBarStyle.marginTop.replace('px', '') // 搜索框的上外边距
      const searchMarginBottom = +searchBarStyle.marginBottom.replace('px', '') // 搜索框的上内边距
      const bottomBarH = bottomBar.getBoundingClientRect().height
      // 计算高度
      const containerH = layoutH - tabPaddingTop - tabH - SearchBarH - searchMarginTop - searchMarginBottom - bottomBarH
      this.containerH = containerH
    })
  }
}
</script>

<style lang="less">
.tab__tabs {
  padding-top: 22px;
  &__left {
    justify-content: flex-end;
    margin-right: 26px;
  }
  &__right {
    justify-content: flex-start;
    margin-left: 26px;
    &__container{
      overflow: auto;
      &::-webkit-scrollbar{
        display: none;
      }
    }
  }
  &__text {
    height: 53px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    color: #ffffff;
    letter-spacing: 0;
    font-weight: 400;
  }
  &__text__active {
    letter-spacing: 0;
    font-size: 38px;
    color: #f8f8f8;
    font-weight: 500;
  }
  &__nav {
    border-radius: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 9px 4px 6px;
    background-image: linear-gradient(180deg, #feede0 0%, #feece0 100%);
    box-shadow: 0 2px 4px 0 rgba(103, 0, 8, 0.15);

    &__img {
      width: 44px;
      height: 44px;
    }
    &__text {
      font-size: 22px;
      color: #ff5000;
      font-weight: 500;
      margin-left: 7px;
    }
  }
}
.van-tabs__nav {
  background: transparent;
}
.left_btn{
  margin-left: 24px;
}
.right_btn{
  margin-right: 24px;
}
</style>
